<template>
	<view class="u-page">
		<view class="formbox">
			<view class="item">
				<view class="title">贸易商：</view>
				<view class="value">
					<u-input v-model="channel.title" disabled/>
				</view>
			</view>
			<view class="item" v-if="seller">
				<view class="title">推荐人：</view>
				<view class="value">
					<u-input v-model="seller.realname" disabled/>
				</view>
			</view>
			<block v-if="formdata.customer_type=='company'">
			<view :class="rules.name.error?'item error':'item'">
				<view class="title">企业名称：</view>
				<view class="value">
					<u-input placeholder="请输入企业名称" v-model="formdata.name" @blur="$validate('name')" />
					<view class="tag-danger" v-if="rules.name.error">企业名称不能为空</view>
				</view>
			</view>
			<view :class="rules.cover_url.error?'item error':'item'">
				<view class="title">企业门头：</view>
				<view class="value">
					<u-upload
							:fileList="formdata.cover_url"
							:sizeType="sizeType"
							@afterRead="afterRead1"
							@delete="deletePic1"
							width="100"
							height="100"
						>
					</u-upload>
					<view class="tag-danger" v-if="rules.cover_url.error">请上传企业门头</view>
				</view>
			</view>
			<view :class="rules.license_photo.error?'item error':'item'">
				<view class="title">营业执照：</view>
				<view class="value">
					<u-upload 
						:fileList="formdata.license_photo" 
						:sizeType="sizeType" 
						@afterRead="afterRead"
						@delete="deletePic"
						width="100"
						height="100"
					>
					</u-upload>
					<view class="tag-danger" v-if="rules.license_photo.error">请上传营业执照</view>
				</view>
			</view>
			<view :class="rules.license.error?'item error':'item'">
				<view class="title">执照编号：</view>
				<view class="value">
					<u-input placeholder="请输入执照编号" v-model="formdata.license" @blur="$validate('license')"/>
					<view class="tag-danger" v-if="rules.license.error">{{rules.license.error}}</view>
				</view>
			</view>
			</block>
			<view class="item">
				<view class="title">所属区域：</view>
				<view class="value picker">
					<Area v-if="formdata.region" :region="formdata.region" @changeRegion="changeRegion"></Area>
				</view>
			</view>
			<view :class="rules.address.error?'item error':'item'">
				<view class="title">
					<text>{{formdata.customer_type=='company'?'详细地址':'详细住址'}}：</text>
				</view>
				<view class="value">
					<u--textarea confirmType="done" :placeholder="(formdata.customer_type=='company')?'请输入详细地址':'请输入小区,楼号'" @blur="$validate('address')" v-model="formdata.address"></u--textarea>
					<view class="tag-danger" v-if="rules.address.error">{{rules.address.error}}</view>
				</view>
			</view>
			<view :class="dingweierror?'item error':'item'">
				<view class="title">收货位置：</view>
				<view class="value picker" @click="local">
					<text v-if="dw_address" style="max-width: 390rpx;overflow: hidden;white-space: nowrap;">{{dw_address}}</text>
					<text v-else>未定位</text>
					<u-icon name="arrow-right"></u-icon>
					<view class="tag-danger" v-if="dingweierror">请定位客户位置！</view>
				</view>
			</view>
			<view :class="rules.contact.error?'item error':'item'">
				<view class="title">联系人：</view>
				<view class="value">
					<u-input placeholder="请输入联系人" v-model="formdata.contact"
						@blur="$validate('contact')" />
					<view class="tag-danger" v-if="rules.contact.error">{{rules.contact.error}}</view>
				</view>
			</view>
			<view :class="rules.mobile.error?'item error':'item'">
				<view class="title">联系手机：</view>
				<view class="value">
					<u-input placeholder="请输入联系手机" v-model="formdata.mobile"
						@blur="$validate('mobile')" />
					<view class="tag-danger" v-if="rules.mobile.error">{{rules.mobile.error}}</view>
				</view>
			</view>
			<view :class="wxerror?'item error':'item'">
				<view class="title">绑定微信：</view>
				<view class="value picker" @click="$navigateTo" data-url="common/wxuser">
					<view style="max-width: 400rpx;" v-if="wxuser.length>0">
						<text style="margin-right: 10rpx;" class="tag-info" v-for="(wx,i) in wxuser" :key="i">{{wx.nickname}}</text>
					</view>
					<text v-else>未绑定</text>
					<u-icon name="arrow-right"></u-icon>
					<view class="tag-danger" v-if="wxerror">请绑定商铺管理员微信</view>
				</view>
				<u-button custom-style="margin-top: 8rpx;" v-if="wxuser.length>0" type="error" text="清空微信" size="small" @click="clearWx"></u-button>
			</view>
			<view class="item">
				<view class="title">结算方式：</view>
				<view class="value">
					<u-checkbox-group
						v-model="formdata.settle_type"
						placement="column"
						@change="changeSettleType">
						<u-checkbox
							:customStyle="{marginBottom: '8px'}"
							v-for="(item, key) in settle_type"
							:key="key"
							:label="item"
							:name="key"
						>
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<view :class="rules.bill_date.error?'item error':'item'" v-if="formdata.settle_type=='month'">
				<view class="title">账单日期：</view>
				<view class="value">
					<u-input placeholder="请输入账单日期" @blur="$validate('bill_date')" v-model="formdata.bill_date" type="number">
						<u--text
							text="号"
							slot="suffix"
							type="tips"
						></u--text>
					</u-input>
					<view class="tag-danger" v-if="rules.bill_date.error">{{rules.bill_date.error}}</view>
				</view>
			</view>
			<view class="item" v-if="gird.length>0">
				<view class="title">所属网格：</view>
				<view class="value picker">
					<picker mode="selector" :range="gird" range-key="gird_title" :value="gird_index" @change="changeGird">
						<view class="uni-input">{{gird[gird_index].gird_title}}</view>
					</picker>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="submit">
				<u-button v-if="register_id" type="primary" text="审核通过" @click="submit" :disabled="disabledsubmit"></u-button>
				<u-button v-if="formdata.id" type="primary" text="确认修改" @click="submit" :disabled="disabledsubmit"></u-button>
				<u-button v-if="!register_id && !formdata.id" type="primary" text="添加客户" @click="submit" :disabled="disabledsubmit"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {methods}  from '@/utils/methods.js';
	import * as Area from '@/pages/components/area.vue';
	export default {
		components:{
			Area
		},
		data() {
			return {
				disabledsubmit:false,
				//注册企业
				sizeType: ['compressed'],
				rules: {					
					name: {
						title: '企业名称',
						rule: 'require',
						error: ''
					},
					cover_url: {
						title: '企业门头',
						rule: 'require',
						error: ''
					},
					license_photo: {
						title: '营业执照',
						rule: 'require',
						error: ''
					},
					license: {
						title: '执照编号',
						rule: 'require',
						error: ''
					},
					contact: {
						title: '联系人',
						rule: 'require;chinaChar;length(2~5)',
						error: ''
					},
					mobile: {
						title: '联系手机',
						rule: 'require;mobile',
						error: ''
					},
					address:{
						title: '详细地址',
						rule: 'require',
						error: ''
					}
				},
				formdata:{
					id:'',
					name: '',
					customer_type:'',
					cover_url:[],
					license: '',
					license_photo: [],
					region: '',
					contact: '',
					mobile: '',
					latitude:'',
					longitude:'',
					address: '',
					settle_type:[],
					bill_date:1,
					gird_id:'',
					user_id:''
				},
				wxuser:[],
				register_id:'',
				channel:'',
				seller: '',
				dw_address:false,
				dingweierror:false,
				wxerror:false,
				settle_type:[],
				gird:[],
				gird_index:0
			}
		},
		onShow() {
			let check_user=uni.getStorageSync('check_user') || '';
			if(check_user){
				let wxuser=this.wxuser;
				for(let i=0;i<wxuser.length;i++){
					if(wxuser[i].id==check_user.id){
						return;
					}
				}
				wxuser.push(check_user);
				let user_id=[];
				for(let i=0;i<wxuser.length;i++){
					user_id.push(wxuser[i].id);
				}
				this.wxuser=wxuser;
				this.formdata.user_id=user_id.join(',');
				this.wxerror=false;
				uni.setStorageSync('check_user','');
			}
		},
		onLoad(e) {
			if(e.register_id){
				uni.setNavigationBarTitle({
					title:'审核申请'
				});
				this.$get('admin/admin/getregister', {
					id: e.register_id
				},true).then(res => {
					this.register_id=res.id;
					this.formdata = res.info;
					if(res.info.latitude && res.info.longitude){
						this.dw_address='已经定位';
					}
					this.wxuser=[res.user];
					this.formdata.user_id=res.user.id;
					this.formdata.bill_date=1;
					this.formdata.settle_type=['sale_pay','underline'];
					this.initField(res);
				});
			}else if(e.customer_id){
				uni.setNavigationBarTitle({
					title:'编辑客户'
				});
				this.$get('admin/customer/getCustomer?customer_id='+e.customer_id,'',true).then(res => {
					this.formdata = {
						id:res.customer.id,
						customer_type:res.customer.customer_type,
						name: res.customer.name,
						cover_url:[{
							url:res.customer.cover_url,
						}],
						license: res.customer.license,
						license_photo: [{
							url:res.customer.license_photo
						}],
						region: [res.customer.province_id,res.customer.city_id,res.customer.area_id],
						contact: res.customer.contact,
						mobile: res.customer.mobile,
						latitude:res.customer.latitude,
						longitude:res.customer.longitude,
						address: res.customer.address,
						bill_date:res.customer.bill_date,
						user_id:res.customer.user_id,
						settle_type:res.customer.settle_type
					};
					if(res.customer.latitude && res.customer.longitude){
						this.dw_address='已经定位';
					}
					this.wxuser=res.customer.user;
					this.initField(res);
				});
			}else{
				uni.setNavigationBarTitle({
					title:'添加客户'
				});
				this.formdata.region=[2572,2573,2579];
				this.formdata.customer_type=e.type;
				this.$get('admin/customer/getChannel','',true).then(res => {
					this.initField(res);
				});
			}
		},
		methods: {
			...methods,
			changeRegion:function(e){
				this.formdata.region=e;
			},
			initField:function(res){
				this.seller = res.seller;
				this.channel = res.channel;
				//设置结算
				this.settle_type=res.settle_type;
				//设置网格
				let gird=res.gird;
				let gird_index=0;
				for(let i=0;i<gird.length;i++){
					if(res.customer && res.customer.gird_id==gird[i].id){
						gird_index=i;
					}
				}
				this.gird=gird;
				this.gird_index=gird_index;
				if(gird.length>0){
					this.formdata.gird_id=gird[gird_index].id;
				}
			},
			changeSettleType:function(e){
				
			},
			changeGird:function(e){
				this.gird_index=parseInt(e.detail.value);
				this.formdata.gird_id=this.gird[this.gird_index].id;
			},
			clearWx:function(){
				this.wxuser=[];
				this.formdata.user_id='';
			},
			local: function() {
				uni.chooseLocation({
					latitude:'26.6015',
					longitude:'106.62254',
					success: (e) => {
						this.dw_address = e.address;
						this.formdata.latitude = e.latitude;
						this.formdata.longitude = e.longitude;
						if(this.formdata.customer_type=='company'){
							this.formdata.address = e.address;
						}
						this.dingweierror = false;
					},
					fail: (e) => {
						console.log(e.errMsg);
					}
				});
			},
			deletePic: function() {
				this.formdata.license_photo = [];
			},
			afterRead: function(e) {
				let file = e.file;
				this.$uploadFile(file.url, res => {
					this.formdata.license_photo = [{
						url: res.fullurl
					}];
					this.getCardId(res.fullurl);
				});
			},
			deletePic1:function(){
				this.formdata.cover_url=[];
			},
			afterRead1:function(e){
				let file=e.file;	
				this.$uploadFile(file.url,res=>{
					this.formdata.cover_url=[{url:res.fullurl}];
				});
			},
			getCardId: async function(url) {
				this.$post('common/cardinfo', {
					url: url
				}, true).then(res => {
					if (res) {
						this.formdata.license = res.code;
						this.formdata.address = res.address;
					} else {
						this.$msg('没有识别出营业执照编号，请手动输入');
					}
				});
			},
			submit: function() {
				if(this.disabledsubmit){
					return;
				}
				let rules={
					company:['name','cover_url','license_photo','license','contact','mobile','address'],
					family:['contact','mobile','address'],
				};
				let va=false;
				for (let k in rules[this.formdata.customer_type]) {
					if (!this.$validate(rules[this.formdata.customer_type][k])) {
						va=true;
					}
				}
				if (!this.formdata.latitude || !this.formdata.longitude) {
					this.dingweierror = true;
					va=true;
				}
				if(!this.formdata.user_id){
					this.wxerror=true;
					va=true;
				}
				if(va){
					return;
				}
				if(this.register_id){
					this.shenhe();
				}else{
					this.edit();
				}
			},
			edit:function(){
				this.disabledsubmit=true;
				this.$post('admin/customer/edit',this.formdata,true).then(res => {
					setTimeout(res => {
						this.$reLaunch('admin/store');
					}, 1500);
				}).catch(t=>{
					this.disabledsubmit=false;
				});
			},
			shenhe:function(){
				this.disabledsubmit=true;
				this.$post('admin/admin/shenhe', {
					register_id:this.register_id,
					type:'company',
					info: this.formdata
				}, true).then(res => {
					setTimeout(res => {
						this.$reLaunch('admin/store');
					}, 1500);
				}).catch(t=>{
					this.disabledsubmit=false;
				});
			},
		}
	}
</script>

<style lang="scss">
	@import "../common/form.scss";
	.u-page {
		padding-bottom: 100rpx;
	}
	.clearwx{
		display: flex;
		padding-bottom: 20rpx;
	}
</style>
